<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.twoscreen.PlayerScreen"%>
<%@ page import="com.twoscreen.Event"%>
<%@ page import="com.twoscreen.Video"%>
<%@ page import="com.twoscreen.TUser"%>
<%@ page import="com.twoscreen.Points"%>
<%@ page import="java.util.List"%>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.google.appengine.api.users.UserService" %>
<%@ page import="com.google.appengine.api.users.UserServiceFactory" %>
<%
	//Variables
	String playerScreenID;
	UserService userService = UserServiceFactory.getUserService();
	User user = userService.getCurrentUser();
	String thisURL = request.getRequestURL().toString();
	TUser tuser = null;
	String username = null;
	String points = null;
	String correctAnswers = null;

	//Check if there is a psID or policy cookie and get it
	Cookie psIDcookie = null;
	Boolean showCookieNotice = true;
	Cookie cookies[] = request.getCookies();
	if (cookies != null) {
		for (int i=0 ; i<cookies.length ; i++) {
			if (cookies[i].getName().equals("psID")) {
				psIDcookie = cookies[i];
			}
			if (cookies[i].getName().equals("cookie-dismiss")) {
				showCookieNotice = false;
			}
		}
	}
	
	//If there is a cookie use the psID if not get a new one
	if (psIDcookie != null) {
		playerScreenID = psIDcookie.getValue();
	} else {
		playerScreenID = PlayerScreen.getPlayerScreenId();
		//Set the psID in a cookie
		Cookie playerScreen = new Cookie("psID", playerScreenID);
		playerScreen.setMaxAge(24*60*60);
		response.addCookie(playerScreen);
	}
	
	if (user != null) {
		tuser = TUser.getTUser(user);
		username = tuser.getUserName();
		points = Points.getPointsTotal(tuser);
	}
%>
<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="cache-control" content="no-store, no-cache, must-revalidate, max-age=1" />
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="expires" value="1" />
		<title>Two-Screen | Watch</title>
		<link rel="shortcut icon" href="/images/favicon.ico" />
		<link href='https://fonts.googleapis.com/css?family=Montserrat|Exo:200,400' rel='stylesheet' type='text/css' />
		<link href="/css/web.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="/css/jquery.fancybox.css?v=2.1.2" media="screen" />
		<script type="text/javascript" src='/_ah/channel/jsapi'></script>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="/js/jquery.fancybox.js?v=2.1.3"></script>
		<script type="text/javascript" src="/js/jquery.qrcode.js"></script>
		<script type="text/javascript" src="/js/qrcode.js"></script>
		<script type="text/javascript" src="/js/comm.js"></script>
		<script type="text/javascript" src="/js/cookie.js"></script>
		<script type="text/javascript" src="/js/userUpdateWeb.js"></script>
		<script type="text/javascript" src="/js/cufon-yui.js"></script>
		<script type="text/javascript" src="/js/College_700.font.js"></script>
		<script type="text/javascript">
			Cufon.replace('h1#logo');
		</script>
		<script type="text/javascript">
			var playerScreenID = "<%= playerScreenID %>";
			function qr() {
				var qrDimensions = 320;
				var link = "http://" + window.location.host + "/app/index.jsp?psID=" + playerScreenID;
				jQuery('#qrcode').qrcode({width: qrDimensions,height: qrDimensions,text: link});
			}
			function load() {
				requestToken();
				qr();
				iniOptionsMenu();
			}
		</script>
		<script type="text/javascript">
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-35281811-1']);
			_gaq.push(['_trackPageview']);
			
			(function() {
			  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
			})();
		</script>
	</head>
	<body onload="load();" onunload="">
	
		<div id="head-bg">
			<div class="inner-wrapper">
				<div id="header">
					<div id="head-logo">
						<a href="/"><img id="logo" alt="home" src="/images/logo2.png" /></a>
						<h1 id="logo"><a href="/">Two-screen</a></h1>
					</div>
					<ul class="menu">

<% 
	if (user != null) {
%>
				
						<li id="head-user">
							<h3 class="menu">you</h3>
							<ul class="head-sub">
								<li class="noHover"><h3>points: <%= points %></h3></li>
								<li><h3><a class="fancybox" href="#username-update-dialog">update username</a></h3></li>
								<li><h3>
										<a class="head-link" href="<%= userService.createLogoutURL(thisURL) %>">log out</a>
									</h3>
								</li>
							</ul>
						</li>
						

<% 
	} else {
%>
				
						<li id="head-user">
							<h3 class="menu"><a class="head-link" href="<%= userService.createLoginURL(thisURL) %>">log in</a></h3>
						</li>
				
<% 
	}
%>				
				
					
						<li id="head-explore">
							<h3 class="menu"><a class="head-link" href="/connect.jsp">watch</a></h3>
						</li>
						
						
						<li id="head-create">
							<h3 class="menu"><a class="head-link" href="/producers/index.jsp">create</a></h3>
						</li>
					</ul>
					
				</div>
				<div class="clear"></div>
			</div>
		</div>
	
		<div id="home-bg">
			<div class="inner-wrapper">
			
<% 
	if (showCookieNotice) {
%>
				<%@ include file="/include/cookie-notice.html" %>
<% 
	}
%>	

				<h1>Want to watch two-screen?</h1>
				<h3 class="thin">Just follow the three easy steps below to get started.</h3>
				<div class="feature-box first grey" style="height: 295px">
					<h3>1. Scan</h3>
					<p>Scan the QR code below using Google Goggles or any other QR code scanner.</p>
					<p>If you don't have a QR code scanner open the internet browser on your 
						phone or tablet	and navigate to:</p>
					<p><span>two-screen.appspot.com/app/</span></p>
					<p>once on the page and signed in enter this screen ID:</p>
					<p><span><%=playerScreenID %></span> (case sensitive)</p>
				</div>
				<div class="feature-box blue" style="height: 295px">
					<h3>2. Choose</h3>
					<p>Now your phone or tablet is connected you can use it to find the video
						you want to watch.</p>
					<p>Once you have found your desired video tap it and it will play on this screen!</p>
				</div>
				<div class="feature-box green" style="height: 295px">
					<h3>3. Enjoy!</h3>
					<p>Get involved by answering questions to win points!</p>
					<p>Find out more information about the video you are watching.</p>
					<p>Connect with the show on social media.</p>
				</div>
				
				<div class="clear"></div>
				
				<div id="qrcode"></div>

			</div>
		</div>
		<div id="username-update-dialog" style="width:400px;display: none;">
			<h3>Update user name: <span id="currentUn"><%= username %></span></h3>
			<br>
			<label for="username">User name:</label><input type="text" name="username" id="username-input">
			<br>
			<p id="unError"></p>
			<div id="unSuggestions"></div>
			<button type="button" onclick="userSave()">Save</button>
		</div>
		<div id="username-success" style="width:400px;display: none;">
			<h3 class="success">User name saved</h3>
		</div>
		
		<%@ include file="/include/footer.html" %>
		
	</body>
</html>